<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
	<style>	
	#container
	{
	margin-top: 70px;
	}
	
	#box0,#box1,#box2,#box3,#box4,#box5
	{
    display:inline-block;
    width: 40px;
    height: 40px;
    text-align: center;
    border-style: solid;
    border-width: 1.5px;
    border-color: #d1d1d1;
    background-color: #f3f3f3;
    margin: 30px;
    padding: 30px 15px 30px 15px;
	}
	
	.skew1
	{
	transform: skew(30deg,0deg);
	-ms-transform: skew(30deg,0deg);	/* IE 9 */
	-webkit-transform: skew(30deg,0deg);	/* Safari and Chrome */
	-o-transform: skew(30deg,0deg);	/* Opera */
	-moz-transform: skew(30deg,0deg);	/* Firefox */
	}
	
	.scale1
	{
	transform:scale(0.5,1);
-ms-transform:scale(0.5,1); /* IE 9 */
-moz-transform:scale(0.5,1); /* Firefox */
-webkit-transform:scale(0.5,1); /* Safari and Chrome */
-o-transform:scale(0.5,1); /* Opera */
	}

	.rotate1
	{
	transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-moz-transform:rotate(30deg); /* Firefox */
-webkit-transform:rotate(45deg); /* Safari and Chrome */
-o-transform:rotate(30deg); /* Opera */
	}
	
	.trans
	{
	transform:translate(0,100px);
-ms-transform:translate(50px,100px); /* IE 9 */
-moz-transform:translate(50px,100px); /* Firefox */
-webkit-transform:translate(0,100px); /* Safari and Chrome */
-o-transform:translate(50px,100px); /* Opera */
	}
	
	.alltrans
	{
	transform:matrix(1,1,0,1,3,30);
-ms-transform:matrix(1,1,0,1,3,30);		/* IE 9 */
-moz-transform:matrix(1,1,0,1,3,30);	/* Firefox */
-webkit-transform:matrix(1,1,0,1,3,30);	/* Safari and Chrome */
-o-transform:matrix(1,1,0,1,3,30);		/* Opera */
	}
	</style>
    <script>
	
	</script>
   <body>
 <div id="container">
 <div id="box0">box0</div>
 <div id="box1" class="skew1">box1</div>
 <div id="box2" class="scale1">box2</div>
 <div id="box3" class="rotate1">box3</div>
 <div id="box4" class="trans">box4</div>
 <div id="box5" class="alltrans">box5</div>
 </div>
   </body>
</html>
